import React, { Component } from 'react';
import './index.css';
import { NavBar, Carousel } from 'antd-mobile';
import { withRouter } from 'react-router-dom';
import SearchInput from '../searchInput/Index';
import {getBanner, getCatitems,getFloordata,handleBannerClick} from '../../store/actionCreator/home';
import store from '../../store';
import {connect} from 'react-redux'
class Home extends Component {
  componentDidMount(){
    store.dispatch(getBanner())
    store.dispatch(getCatitems())
    store.dispatch(getFloordata())
  }

  // 轮播图点击事件
  handleBannerClick = (goods_id) => {
    this.props.history.push('/goodDetail/' + goods_id)
  }
  // 搜索框点击事件
  handleSearch=() => {
    // console.log(this);
    this.props.history.push('/searchInput')
  }
  // 导航列表点击事件
  handleCategory=() => {
    this.props.history.push('/category')
  }
  // 图片列表点击事件
  handleImgClick=() => {
    this.props.history.push('/goodList/:query="12"')
  }
  
  render() {
    return (
      <div className="yg-home">
        <div className="yg-home-title">
          <NavBar className="home-title">优购商城</NavBar>
        </div>
        {/* 顶部搜索框开始 */}
        <div className="yg-home-search">
          <div className="home-search-item" onClick={this.handleSearch}>
            <SearchInput></SearchInput>
          </div>
        </div>
        {/* 顶部搜索框结束 */}
        {/* 首页轮播图开始 */}
        <Carousel
          autoplay={true}
          infinite
        >
          {this.props.banner_list.map(v => (
            <div className="yg-banner-list"
              onClick={this.handleBannerClick.bind(this, v.goods_id)}
              key={v.goods_id}
              style={{ display: 'inline-block', width: '100%', height: this.props.imgHeight }}
            >
              <img className="banner-list-item"
                src={v.image_src}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </div>
          ))}
        </Carousel>
        {/* 首页轮播图结束 */}
        {/* 首页导航开始 */}
        <div className="yg-home-nav">
          <div className="home-nav-list">
            {
              this.props.nav_list.map((v, i) => {
                return <div className="nav-list-item" key={i} onClick={this.handleCategory}>
                  <img src={v.image_src} alt="" />
                </div>
              })
            }
          </div>
        </div>
        {/* 首页导航结束 */}
        {/* 首页图片列表开始 */}
        <div className="yg-home-product">
          {this.props.product_list.map((v, i) => {
            return <div className="home-product-item" key={i}>
              {/* 图片标题开始 */}
              <div className="product-item-title">
                <img src={v.floor_title.image_src} alt="" />
              </div>
              {/* 图片标题结束 */}
              {/* 图片列表开始 */}
              <div className="product-img-list">
                {v.product_list.map((vs, j) => {
                  return <div className="img-list-item" key={j} onClick={this.handleImgClick}>
                    <img src={vs.image_src} alt="" />
                  </div>
                })}
              </div>
              {/*图片列表结束  */}
            </div>
          })}
        </div>
        {/* 首页图片列表结束 */}
      </div>
    );
  }
}
let mapStateToProps=(state)=>{
  // console.log(state);
  return{
    banner_list: state.banner_list, //轮播图
    imgHeight: state.imgHeight, //轮播图高度
    nav_list: state.nav_list,   //导航列表
    product_list: state.product_list,
  }
}
let mapDispatchToProps=(dispatch)=>{
  return{
    handleBannerClick:()=>{
      dispatch(handleBannerClick())
    }
  }
}
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Home));
